<template>
  <div style="height: 100%">
    <div class="searchList">
      <div class="row">
        <field
          v-if="itemData.equipmentTypeName !== '智能安防与巡检' && !itemData.equipmentTypeName.includes('实训室') && itemData.equipmentTypeName !== '机床运行状态监测'"
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.room"
          label-width="30px"
          label="区域"
          placeholder="选择区域"
          @click="showPickerRoom = true"
        ></field>
        <popup v-model="showPickerRoom" position="bottom">
          <picker
            show-toolbar
            :columns="columnsRoom"
            @confirm="onConfirmRoom"
            @cancel="showPickerRoom = false"
          />
        </popup>
        <field
          v-if="itemData.equipmentTypeName !== '智能安防与巡检' && itemData.equipmentTypeName !== '机床运行状态监测'"
          class="rightField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.floor"
          label-width="60px"
          label-position="right"
          label="楼层"
          placeholder="选择楼层"
          @click="showPickerFloor = true"
        />
        <popup v-model="showPickerFloor" position="bottom">
          <picker
            show-toolbar
            :columns="columnsFloor"
            @confirm="onConfirmFloor"
            @cancel="showPickerFloor = false"
          />
        </popup>
      </div>
      <!-- 智能安防与巡检 -->
      <div v-if="itemData.equipmentTypeName === '智能安防与巡检'" class="row" style="padding-top: 0px">
        <field
          label-width="60px"
          readonly
          right-icon="arrow-down"
          clickable
          name="datetimePicker"
          :value="searchForm.date"
          label="选择时间"
          placeholder="请选择时间"
          @click="timeRange = true"
        />
        <Calendar color="#1989fa" :show-confirm="false" v-model="timeRange" type="range" :min-date="new Date(1990, 0, 1)" @confirm="onConfirmTimeRange" />
        <van-button @click="resetTimeRange" style="width: 100px; border-radius: 5px; margin-right: 15px; margin-top: 10px; height: 25px; padding: 3px 5px;" type="default">重置时间</van-button>
      </div>
      <div v-if="itemData.equipmentTypeName === '智能安防与巡检'" class="row" style="padding-top: 10px">
        <field
          label-width="60px"
          readonly
          right-icon="arrow-down"
          clickable
          name="datetimePicker"
          :value="searchForm.event"
          label="选择行为"
          placeholder="选择行为"
          @click="showEventType = true"
        />
          <popup v-model="showEventType" position="bottom">
            <picker
              show-toolbar
              :columns="eventType"
              @confirm="onConfirmEvent"
              @cancel="showEventType = false"
            />
          </popup>
        <field
          class="eqptName"
          v-if="itemData.equipmentTypeName === '智能安防与巡检'"
          v-model="equipmentName"
          label-width="60px"
          label="设备名称"
          placeholder="设备名称"
          @blur="inputNameChange"
        />
      </div>
    </div>
    <div class="contentList">
      <div class="listAll">
        <pull-refresh v-model="refreshing" @refresh="onRefresh">
          <list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!--            智能烟感-->
            <template v-if="itemData.equipmentTypeName === '智能烟感'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />异常
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/3.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            燃气-->
            <template v-if="itemData.equipmentTypeName === '智能燃气'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />异常
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/2.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            空气监测-->
            <template v-if="itemData.equipmentTypeName === '空气监测'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />
                    <p>正常</p>
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />
                    <p>异常</p>
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/6.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            水压-->
            <template v-if="itemData.equipmentTypeName === '智能水压'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />
                    <p>正常</p>
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />
                    <p>异常</p>
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/1.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            井盖-->
            <template v-if="itemData.equipmentTypeName === '智能井盖'">
              <div class="itemWrap" style="height: 120px" v-for="(item, index) in list" :key="index">
                <div style="height: 60%" class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />
                    <p>异常</p>
                  </div>
                </div>
                <div style="height: 60%" class="item-right">
                  <img
                    src="../../assets/images/Digital/7.png"
                  />
                </div>
                <div style="height: 45px" class="stateDiv-jinggai">
                  <notice-bar :scrollable="false">
                    <swipe
                      style="height: 45px;"
                      vertical
                      class="notice-swipe-jinggai"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            温感-->
            <template v-if="itemData.equipmentTypeName === '智能温感'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />异常
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/4.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content[`${emit.getBy}`] }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <template v-if="itemData.equipmentTypeName === '空调能耗监测'">
              <div class="itemWrap" style="height: 130px" v-for="(item, index) in list" :key="index">
                <div class="item-left" style="height: 55%">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />异常
                  </div>
                </div>
                <div class="item-right" style="height: 55%">
                  <img
                    src="../../assets/images/Digital/14.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item>功能: 制冷/制热</swipe-item>
                      <swipe-item v-for="(emit, o) in getNameByApi" :key="o">{{ emit.name }}: {{ item.content && item.content[`${emit.getBy}`] }} {{ emit.name === '电能' ? 'kwh' : emit.name === '电流' ? 'mA' : '' }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
                <div style="width: 100%;height: 20px;display: flex">
                  关
                  <!-- controlDeviceState：1是开，0是关  -->
                  <van-switch @click="controlSomeDevice(item)" style="margin: 0 4px" size="16px" v-model="item.controlDeviceState === 1" />
                  开
                  &ensp;&nbsp;
                  温度：23°
                </div>
              </div>
            </template>
            <!--            实训室PM2.5监测-->
            <template v-if="itemData.equipmentTypeName === '实训室PM2.5监测'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />异常
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/16.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item>PM2.5: {{ item.content.pm2_5 }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            噪音监测-->
            <template v-if="itemData.equipmentTypeName === '实训室噪音监测'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />
                    <p>异常</p>
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/17.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item>噪音: {{ item.content.noise }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            实训室温湿度监测-->
            <template v-if="itemData.equipmentTypeName === '实训室温湿度监测'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1>{{ item.equipmentAddr }}</h1>
                  <div v-if="item.equipmentState >= 2">
                    <icon name="stop" color="#666666" size="20" />离线
                  </div>
                  <div v-if="item.equipmentState === 0">
                    <icon name="stop" color="#1E9BFA" size="20" />正常
                  </div>
                  <div v-if="item.equipmentState === 1">
                    <icon name="stop" color="#FC5A69" size="20" />
                    <p>异常</p>
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/18.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item>温度: {{ item.content.temperature }}</swipe-item>
                      <swipe-item>湿度: {{ item.content.humidity }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            机床运行状态监测-->
            <template v-if="itemData.equipmentTypeName === '机床运行状态监测'">
              <div class="itemWrap" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                  <h1 style="position: absolute">{{ item.deviceName }}</h1>
                  <div style="margin-top: 3ch" v-if="item.currentStateName === '关机'">
                    <icon name="stop" color="#666666" size="20" />关机
                  </div>
                  <div style="margin-top: 30px" v-if="item.currentStateName === '运行'">
                    <icon name="stop" color="#1E9BFA" size="20" />运行
                  </div>
                  <div style="margin-top: 30px" v-if="item.currentStateName === '待机'">
                    <icon name="stop" color="#1E9BFA" size="20" />待机
                  </div>
                  <div style="margin-top: 30px" v-if="item.equipmentState === '离线'">
                    <icon name="stop" color="#FC5A69" size="20" />离线
                  </div>
                </div>
                <div class="item-right">
                  <img
                    src="../../assets/images/Digital/19.png"
                  />
                </div>
                <div class="stateDiv">
                  <notice-bar :scrollable="false">
                    <swipe
                      vertical
                      class="notice-swipe"
                      :autoplay="3000"
                      :show-indicators="false"
                    >
                      <swipe-item>维修次数: {{ item.maintenanceCount }}</swipe-item>
                      <swipe-item>持续时长: {{ convertSecondsToTime(item.onLineDay) }}</swipe-item>
                    </swipe>
                  </notice-bar>
                </div>
              </div>
            </template>
            <!--            智能安防与巡检-->
            <template v-if="itemData.equipmentTypeName === '智能安防与巡检'">
              <div class="itemWrap" style="width: 100%; height: 130px" v-for="(item, index) in list" :key="index">
                <div style="display: inline-flex; align-items: center; width: 50%">设备地点：<notice-bar style="display: inline-block; width: 90px;" :scrollable="true">{{ item.areaAddr }}</notice-bar></div>
                <div style="display: inline-flex; align-items: center; width: 50%">设备名称：<notice-bar style="display: inline-block; width: 90px;" :scrollable="true">{{ item.deviceName }}</notice-bar></div>
                <div style="display: inline-block; width: 30%; height: 80px;">
                  <img :src="item.eventImgUrl" style="width: 100%; height: 100%" />
                </div>
                <div style="display: inline-block; width: 65%; height: 80px;">
                  <p style="margin-top: 15px">异常行为：{{ item.eventTypeName }}</p>
                  <p style="margin-top: 10px">时间：{{ item.happenTimeStr }}</p>
                </div>
              </div>
            </template>
          </list>
        </pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Field,
  Popup,
  Picker,
  List,
  PullRefresh,
  Button,
  Icon,
  Dialog,
  Toast,
  NoticeBar,
  Swipe, SwipeItem,
  Switch,
  DatetimePicker,
  Calendar
} from "vant";
import { getDevicePage, getAirDevicePage, getUpdateProcessStatus, getDeviceVolumn, airConditionerDeviceControl, queryMobileTrainingFloor, queryMobileTrainingPm, queryMobileTrainingNoise, queryMobileTrainingHum, queryMobileMachine, queryEventType, queryUnusualEvent } from "@/api/Digital";
import { getFloorsList } from "@/api/Alarm";
export default {
  components: {
    Field,
    Popup,
    Picker,
    List,
    PullRefresh,
    VanButton: Button,
    Icon,NoticeBar,
    Swipe, SwipeItem,
    VanSwitch: Switch,
    DatetimePicker,
    Calendar
  },
  data() {
    return {
      timeRange: false,
      equipmentName: '',
      showEventType: false,
      eventType: ['全部'],
      eventTypeFromApi: [],
      showPickerStartTime: false,
      showPickerEndTime: false,
      //equipId: this.$route.query.equipId,
      itemData: {
        equipmentTypeName: ''
      },
      showNum: "showNum",
      columnsRoom: ["全部"],
      columnsFloor: ["全部"],
      columnsFloorFromApi: [],
      showPickerRoom: false,
      showPickerFloor: false,
      searchForm: {
        event: undefined,
        startTime: undefined,
        endTime: undefined,
        eqptName: undefined,
        room: undefined,
        floor: undefined
      },
      active: "全部",
      // 下面部分
      pageInfo: {
        pageNum: 0,
        pageSize: 10
      },
      list: [
        // {
        //   address: '4层 401室',
        //   id: '869549040912038',
        //   type: '温感'
        // }
      ],
      loading: false,
      finished: false,
      refreshing: false,
      totalCount: 0,
      count: 0,
      getNameByApi: []
    };
  },
  computed: {
    uuid2num() {
      return uuid2num;
    }
  },
  mounted() {
    this.itemData = JSON.parse(this.$route.query.data);
    this.timer = setInterval(this.setShowNumFun, 2000);
    this.getFloors()
    if(!this.itemData.equipmentTypeName.includes('实训室') && this.itemData.equipmentTypeName !== '机床运行状态监测' && this.itemData.equipmentTypeName !== '智能安防与巡检') {
      this.getDeviceCount()
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    resetTimeRange() {
      this.searchForm.startTime = undefined
      this.searchForm.endTime = undefined
      this.searchForm.date = ''
      this.onRefresh()
    },
    onConfirmTimeRange(date) {
      const [start, end] = date;
      this.searchForm.startTime = this.dateFormat("YYYY-mm-dd", start)
      this.searchForm.endTime = this.dateFormat("YYYY-mm-dd", end)
      this.searchForm.date = `${this.dateFormat("YYYY-mm-dd", start)} - ${this.dateFormat("YYYY-mm-dd", end)}`
      this.timeRange = false;
      this.onRefresh()
    },
    onConfirmEvent(value) {
      this.searchForm.event = value;
      this.showEventType = false;
      this.onRefresh();
    },
    // 输入设备名称
    inputNameChange() {
      this.searchForm.eqptName = this.equipmentName;
      this.onRefresh()
    },
    onConfirmStartTime(value) {
      this.searchForm.startTime = this.dateFormat("YYYY-mm-dd", value);
      this.showPickerStartTime = false;
      this.onRefresh();
    },
    onConfirmEndTime(value) {
      this.searchForm.endTime = this.dateFormat("YYYY-mm-dd", value);
      this.showPickerEndTime = false;
      this.onRefresh();
    },
    eventClick(e, name) {
      if (e.target._prevClass.includes("van-icon-close")) {
        this.searchForm[name] = "";
        return;
      }
      if (name === "startTime") {
        this.showPickerStartTime = true;
        return;
      }
      this.showPickerEndTime = true;
    },
    // 把秒转换成时分秒
    convertSecondsToTime(seconds) {
      if (seconds <= 0) {
        return "00:00:00";
      }
    
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;
    
      const timeFormat = `${hours.toString().padStart(2, '0')}时${minutes.toString().padStart(2, '0')}分${secs.toString().padStart(2, '0')}秒`;
      return timeFormat;
    },
    // 空调设备控制开关
    async controlSomeDevice(item) {
      let params = {
        "downLinkType": 0,//下发消息类型 0 立即下发； 1 缓存下发
        "openOrOff": item.controlDeviceState === 1 ? 2 : 1 , //开关操作 1 开 2 关
        "serialNumber": item.equipmentNumber, //设备序列号
        "eqptId": item.equipmentId //设备id
      }
      let res = await airConditionerDeviceControl(params)
      if (res.code === 0) {
        Toast.success("操作成功");
        let state = item.controlDeviceState
        state = state === 1 ? 0 : 1
        return item.controlDeviceState = state 
      } else {
        Toast.fail("操作失败");
      }
    },

    async getDeviceCount() {
      let res = await getDeviceVolumn(this.itemData.equipmentTypeId)
      if (res.code === 0) {
        if(res.data.deviceColumnList.length>0) {
          res.data.deviceColumnList.map((item)=> {
            let obj = {
              name: item.paramMemo,
              getBy: item.paramName
            }
            this.getNameByApi.push(obj)
          })
        }
      }
    },
    async getFloors() {
      if (this.itemData.equipmentTypeName.includes('实训室')) {
        let res = await queryMobileTrainingFloor()
        if (res.code === 0) {
          res.data.map((item, i) => {
            this.columnsFloor.push(item.layerName)
            this.columnsFloorFromApi.push(item)
          })
        }
      } else {
        let res = await getFloorsList({parentId: 0, tag: 1})
        if (res.code === 0) {
          res.data.map((item, i) => {
            this.columnsRoom.push(item.name)
          })
        }
      }
    },
    setShowNumFun() {
      this.showNum = this.showNum === "showNum" ? "noNum" : "showNum";
    },
    async search(pageNum) {
      this.finished = false;
      if(this.itemData.equipmentTypeName === "智能安防与巡检") {
        let eventRes = await queryEventType()
        if(eventRes.code === 0) {
          this.eventType = []
          this.eventTypeFromApi = eventRes.data
          eventRes.data.map((item)=>{
            this.eventType.push(item.eventTypeName)
          })
        }

        let studentEventCode = null
        this.eventTypeFromApi.map((item)=>{
          if (item.eventTypeName === this.searchForm.event) {
            studentEventCode = item.eventTypeId
          }
        })
        let params = {
          studentEventCode,
          "eqptName": this.searchForm.eqptName,//设备名称
          "startTime": this.searchForm.startTime=== undefined ? undefined : this.searchForm.startTime + ' 00:00:00', //开始时间
          "endTime": this.searchForm.endTime=== undefined ? undefined : this.searchForm.endTime + ' 00:00:00', //结束时间
          pageNum,
          pageSize: this.pageInfo.pageSize
        }
        let res = await queryUnusualEvent(params);
        if (res.code === 0) {
          // this.finished = true
          res.data.records.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } if(this.itemData.equipmentTypeName === "空调能耗监测") {
        let res = await getAirDevicePage({
          // equipmentType:  this.equipId,
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          building:
            this.searchForm.room === "全部" ? undefined : this.searchForm.room,
          floor:
            this.searchForm.floor === "全部" ? undefined : this.searchForm.floor,
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          this.columnsFloor = ["全部"].concat(res.data.floors);
          res.data.records.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } if(this.itemData.equipmentTypeName === "实训室PM2.5监测") {
        let layerId = null
        this.columnsFloorFromApi.map((item) => {
          if (item.layerName === this.searchForm.floor) {
            layerId = item.layerId
          }
        })
        let res = await queryMobileTrainingPm({
          // equipmentType:  this.equipId,
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          layerId: this.searchForm.floor === "全部" ? undefined : layerId, //楼层id
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          this.finished = true
          res.data.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } if(this.itemData.equipmentTypeName === "实训室噪音监测") {
        let layerId = null
        this.columnsFloorFromApi.map((item) => {
          if (item.layerName === this.searchForm.floor) {
            layerId = item.layerId
          }
        })
        let res = await queryMobileTrainingNoise({
          // equipmentType:  this.equipId,
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          layerId: this.searchForm.floor === "全部" ? undefined : layerId, //楼层id
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          this.finished = true
          res.data.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } if(this.itemData.equipmentTypeName === "实训室温湿度监测") {
        let layerId = null
        this.columnsFloorFromApi.map((item) => {
          if (item.layerName === this.searchForm.floor) {
            layerId = item.layerId
          }
        })
        let res = await queryMobileTrainingHum({
          // equipmentType:  this.equipId,
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          layerId: this.searchForm.floor === "全部" ? undefined : layerId, //楼层id
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          // 没有分页，设置为true
          this.finished = true
          res.data.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } if (this.itemData.equipmentTypeName === "机床运行状态监测") {
        let res = await queryMobileMachine({
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          // 没有分页，设置为true
          this.finished = true
          res.data.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
        return
      } else {
        let res = await getDevicePage({
          // equipmentType:  this.equipId,
          equipmentTypeId: this.itemData.equipmentTypeId, // "77de86bd6ab9f6dbc7c761781547c5b0",
          building:
            this.searchForm.room === "全部" ? undefined : this.searchForm.room,
          floor:
            this.searchForm.floor === "全部" ? undefined : this.searchForm.floor,
          pageNum,
          pageSize: this.pageInfo.pageSize
        });
        if (res.code === 0) {
          this.finished = true;
          this.columnsFloor = ["全部"].concat(res.data.floors);
          res.data.records.forEach(item => {
            this.list.push(Object.assign({}, item));
          });
          this.count = this.list.length;
          this.totalCount = res.data.total;
          this.loading = false;
          if (this.count >= this.totalCount) {
            this.finished = true;
          }
        }
      }
    },
    async onConfirmRoom(value) {
      this.searchForm.room = value;
      this.showPickerRoom = false;
      this.onRefresh();
      let choseObj = {}
      this.columnsFloor = ['全部']
      this.searchForm.floor = "全部"
      this.buildingFromApi.map((item, i) => {
        if (value === item.name) {
          choseObj = item
        }
      })
      if (choseObj !== {}) {
        let res = await getFloorsList({parentId: choseObj.id, tag: 2})
        if (res.code === 0) {
          this.buildingFromApi = res.code
          res.data.map((item, i) => {
            this.columnsFloor.push(item.name)
          })
        }
      }
    },
    onConfirmFloor(value) {
      this.searchForm.floor = value;
      this.showPickerFloor = false;
      this.onRefresh();
    },
    // getListAll (pageInfo, callback) {
    //   let listAdd = []
    //   for (let i = 1; i <= 10; i++) {
    //     listAdd.push((pageInfo.pageNum - 1) * 10 + i)
    //   }
    //   callback(listAdd)
    // },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString(),
        "d+": date.getDate().toString(),
        "H+": date.getHours().toString(),
        "M+": date.getMinutes().toString(),
        "S+": date.getSeconds().toString()
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    navToDetail(item) {
      this.$router.push({
        path: "/digital/deviceDetail",
        query: {
          deviceId: item.equipmentNumber,
          deviceType: item.equipmentType
        }
      });
    },
    clearAlarm(item) {
      Dialog.confirm({
        message: "确认一键解除设备报警？",
        theme: "round-button"
      })
        .then(() => {
          Toast.success("解除成功");
          // this.search(0);
          setTimeout(() => {
            item.equipmentState = 0;
          }, 500);
          return;
          getUpdateProcessStatus({
            equipmentNumber: id
          }).then(res => {
            if (res.code === 0) {
              Toast.success("删除成功");
              this.search(0);
            } else {
              Toast.fail(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    onLoad() {
      setTimeout(() => {
        this.pageInfo.pageNum++;
        this.search(this.pageInfo.pageNum);
      }, 1000);
    },
    onRefresh() {
      this.pageInfo.pageNum = 0;
      this.list = [];
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      this.refreshing = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.notice-swipe {
  height: 20px;
  width: 100%;
  white-space: pre-wrap;
}

.notice-swipe-jinggai {
  height: 100%;
  width: 100%;
  white-space: pre-wrap;
}
.van-swipe-item{
  display: flex;
  align-items: center;
}
.van-notice-bar__content{
  white-space: pre-wrap;
  // height: 100%;
}
.van-swipe__track--vertical{
  // height: 100%;
}

.van-notice-bar{
  width: 100%;
  height: 20px;
  padding: 0;
  // line-height: 20px;
  background-color: transparent;
  color: #666
}
.searchList {
  width: 100%;
  .row {
    display: flex;
    padding-top: 20px;
  }
  .eqptName {
    padding: 10px 10px 10px 0 !important;
    /deep/ .van-field__control {
      border-radius: 5px !important;
    }
  }
  /*height: 150px;*/
  .van-cell {
    position: unset;
    border: none;
    background: transparent;
    /deep/ .van-field__label {
      text-align: right;
      color: white;
    }
    /deep/ .van-field__control {
      background-color: white;
      color: #666;
      border-radius: 5px 0 0 5px;
      box-sizing: border-box;
      padding-left: 10px;
    }
  }
  .rightField {
    padding: 10px 18px 10px 0;
    width: 52%;
  }
  .leftField {
    padding-left: 10px;
    width: 45%;
  }
}
/deep/ .van-field__right-icon {
  background: white !important;
  padding: 0 4px 0 0;
  border-radius: 0 5px 5px 0;
  color: #fc5a69;
}
.tabNav {
  margin-bottom: 5px;
  /deep/ .van-tabs__wrap {
    width: 90%;
    margin-left: 5%;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px #cccccc;
  }
  /deep/ .van-tabs__line {
    background-color: #fc5a69;
  }
}
.contentList {
  margin-top: 30px;
  padding: 0 5%;
  height: calc(100% - 120px);
  .listAll {
    height: 100%;
    overflow: scroll;
  }
}
.van-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .itemWrap {
    width: 48%;
    height: 100px;
    padding: 3% 0 3% 3%;
    box-sizing: border-box;
    border-radius: 5px;
    // background: url("../../assets/images/Smoke/contentBg.png") no-repeat right;
    background-color: #fff;
    background-size: 100% 100%;
    /*box-shadow: 0px 1px 2px 0px #cccccc;*/
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .item-left {
      width: 60%;
      height: 70%;
      h1 {
        z-index: 1;
        font-size: 14px;
        @media screen and (max-width: 320px) {
          font-size: 13px;
        }
      }
      div {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #666;
      }
    }
    .item-right {
      width: 40%;
      height: 70%;
      .van-button--primary {
        margin-top: 20px;
        background: #2eb0fc;
        box-shadow: 0 1px 2px 0 #226eaf;
      }
      .van-button--warning {
        background: #fc987a;
        box-shadow: 0 1px 2px 0 #d45e5e;
      }
      .van-button--normal {
        border-radius: 2px;
        width: 100%;
        color: #fff;
        height: 20px;
        padding: 0;
        font-size: 8px !important;
        border: none;
      }
      img {
        // margin-top: 10px;
        width: 90%;
        opacity: 0.3
      }
    }
    .stateDiv-jinggai {
      /deep/ .van-notice-bar{
        width: 100%;
        height: 100%;
        padding: 0;
        // line-height: 20px;
        background-color: transparent;
        color: #666
      }
    }
    .stateDiv, .stateDiv-jinggai {
      min-height: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 0;
      font-size: 13px;
      font-weight: 500;
      color: #666;
      height: 30px;
      .alarmText {
        font-size: 10px;
        color: #fc5a69;
      }
      .valueText {
        font-size: 8px;
        color: #2eb0fc;
      }
    }
  }
}
/deep/ .van-list__error-text,
/deep/ .van-list__finished-text,
/deep/ .van-list__loading {
  width: 100%;
}
</style>
